<template>
  <el-dialog width="810px" title="用戶" :visible.sync="realityVisible" top="15vh" class="inner-dialog"
             @close="closeReality">
    <el-input placeholder="请输入搜索内容" v-model="keyword" class="input-with-select company-key">
      <el-select v-model="selectTitle" slot="prepend" placeholder="请选择">
        <el-option label="用户ID" value='1'></el-option>
        <el-option label="真实姓名" value='2'></el-option>
      </el-select>
    </el-input>
    <el-button type="primary" size="small" icon="el-icon-search" @click="searchReality">搜索</el-button>
    <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetKeyWord">重置</el-button>

    <el-table :data="gridData" border stripe fit
              :row-style="{height:'40px'}" :header-row-style="{height:'40px'}" style="margin-top: 20px"
              @row-click="selectReality">
      <el-table-column label="用户ID" width="150">
        <template slot-scope="scope">
          {{ scope.row.userId }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
    </el-table>
    <pagination :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" class="page-line-box"
                @pagination="getRealityList"/>
  </el-dialog>
</template>

<script>
  import {baseUrl} from "@/api/constant";
  import Pagination from '@/components/Pagination';
  import {getRealUserName} from "../../api/finance/finance";

  export default {
    name: "realityName",
    props: {
      realityView: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        listQuery: {
          page: 1,
          limit: 5,
          userId: '',
          userName: ''
        },
        total: 0,
        keyword: '',
        selectTitle: '2',
        gridData: [],
        realityVisible: false
      }
    },
    mounted() {
      this.realityVisible = this.realityView;
      this.getRealityList();
    },
    methods: {
      getRealityList() {
        getRealUserName(this.listQuery).then((res) => {
          let retObj = res;
          if (retObj.code == 0) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.gridData = items;
          }
        })
      },
      searchReality() {
        this.listQuery.userId = '';
        this.listQuery.userName = '';
        if (this.selectTitle == '1') {
          this.listQuery.userId = this.keyword;
        } else if (this.selectTitle == '2') {
          this.listQuery.userName = this.keyword;
        }
        this.getRealityList();
      },
      resetKeyWord() {
        this.keyword = '';
        this.selectTitle = '2';
        this.listQuery.userId = '';
        this.listQuery.userName = '';
        this.getRealityList();
      },
      selectReality(row) {//在职企业
        this.realityVisible = false;
        this.$emit("selectReality", row);
      },
      closeReality() {
        this.realityVisible = false;
        this.$emit("closeReality");
      }
    },
    watch: {
      realityView(newVal) {
        this.realityVisible = newVal;
      },
      realityVisible(val) {
        this.$emit('input', val);
      }
    },
    components: {
      Pagination
    }
  }
</script>

<style lang="scss" scoped>
  .inner-dialog > > > .el-dialog .el-dialog__header {
    display: flex;
    align-items: center;
    height: 48px;
    background: #F7F8FA;
    padding: 0px 0px 0px 12px;
    position: fixed;
    width: 810px;
    z-index: 999;
    .el-dialog__headerbtn {
      top: 15px;
    }
  }

  .inner-dialog {
    .company-key {
      margin-right: 12px;
      width: 470px;
      > > > .el-select .el-input {
        width: 110px;
      }
      > > > .el-input-group__prepend {
        background-color: #fff;
      }
    }
    > > > .el-table td, .el-table th {
      padding: 6px 0px;
    }
    > > > .el-table__header .has-gutter th {
      padding: 6px 0px;
    }
  }
  .inner-dialog > > > .el-dialog .el-dialog__body {
    margin-top: 30px;
  }
  .inner-dialog > > > .el-dialog {
    overflow-y: auto;
    height: 450px;
  }
  .page-line-box{
    padding-top: 16px;
    padding-bottom: 10px;
    margin-bottom: 0px;
  }
</style>
